$(function () {
  let layer = layui.layer
  render()
  async function render() {
    const res = await axios.get('http://124.223.14.236:8060/admin/index/baseInfo')
    // console.log(res);

    if (res.data.errno !== 0) {
      return layer.msg('获取数据失败')
    }
    // console.log($("#admin_user").html())
    // console.log(res.data.data.admin_num);
    // 管理员用户
    $("#admin_user").html(`${res.data.data.admin_num}名`)
    // 平台注册用户
    $('#reg_user').html(`${res.data.data.user.total}名`)
    // 平台文章总数
    $('#art_count').html(`${res.data.data.article_num}篇`)
    // 广告位广告图
    $('#banner_count').html(`广告位${res.data.data.advpos_num}个`)
    $('#banner_img').html(`广告图${res.data.data.advimg_num}张`)
    // 最新注册新用户
    const newUser = res.data.data.new_user
    // console.log(newUser);
    const str = newUser.map(item => {
      return `
        <div class="box-box">
          <div>${item.username}&nbsp;&nbsp;&nbsp;&nbsp;
            ${item.sex = item.sex === 0 ? '女' : '男'}
          </div>
        </div>`
    }).join('')
    $('.box').html(str)

    // 点赞文章排行
    const article = res.data.data.hot_article
    // console.log(article);
    const strArticle = article.map(item => {
      return `
      <div class="box-box">
        <div class="info">${item.title}</div>
       </div>`
    }).join('')
    $('#News').html(strArticle)

    // 饼图以及柱状图
    const userGender = res.data.data.user //拿到用户性别数据 ，作为实参传出去
    const allCate = res.data.data.all_cate //拿到分类文章数据，作为实参传出去

    getPei(userGender)
    getBar(allCate)
  }


  // 男女饼图
  function getPei(userGender) {
    const myPeiChart = echarts.init(document.querySelector('#Pie'));
    // console.log(userGender);
    option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        { 
          name: '用户来源',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: userGender.user_woman, name: '女性'  },
            { value: userGender.user_man, name: '男性' },
          ]
        }
      ]
    };

    myPeiChart.setOption(option);
  }


  // 分类文章发布数量,柱状图
  function getBar(allCate) {
    const myBarChart = echarts.init(document.querySelector('#Bar'));
    // console.log(allCate);
    option = {
      grid: {
        // left: '3%',
        // right: '4%',
        bottom: '13%',
        top: '2%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: allCate.map(item => item.catename)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: allCate.map(item => item.num),
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    };
    myBarChart.setOption(option);
  }









})
